<template>
  <div class="base-one">
    BaseTwo
    <p>测试</p>
    <button>按钮</button>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/*
 默认情况下, 写在组件style标签中的样式都是全局样式
 问: 如何让全局样式 变成 局部样式?
 答: 给 style 标签 添加一个 scoped 属性, 那么, 该标签中的样式就是局部样式, 只作用于当前的组件

 ----------------------------
 开发中推荐给组件的style标签加上scoped, 让当前组件的样式只作用于当前组件
 scoped原理:
 1) 会给当前组件中的所有标签加上一个相同的自定义属性 data-v-hash 用于区分不同组件中的标签
 2) 把所有的css选择器 转化成 属性选择器
 比如: div{} ---> div[data-v-xxx]{}  .box{} ---> .box[data-v-xxx]{}
*/
div {
  border: 2px solid purple;
  margin: 20px;
}
</style>